// ignore_for_file: file_names, must_be_immutable

// 无状态组件, 纯展示用的组件
import 'package:dart_core/views/OrderDetail.dart';
import 'package:flutter/material.dart';

class MyApp13 extends StatelessWidget {
  const MyApp13({super.key});

  @override
  Widget build(BuildContext context) {
    // 1. 提供数据
    const Map orderInfo = {
      "createTime": "2024-08-15 21:49:48",
      "orderState": 2,
      "image":
          "https://yanxuan-item.nosdn.127.net/a09de222ed32efa8ffe359b1d5780574.jpg",
      "name": "茶水分离杯耐热隔热玻璃杯, 茶水分离杯耐热隔热玻璃杯, 茶水分离杯耐热隔热玻璃杯",
      "totalNum": 2,
      "curPrice": 119.5,
      "totalMoney": 119.5,
      "attrsText": "规格:白色240ml"
    };

    return Scaffold(
        // 1.1 导航
        appBar: AppBar(
          title: const Text('ListView组件'),
          backgroundColor: Colors.pink,
        ),
        // 1.2 主体内容
        body: ListView.separated(
            itemBuilder: (BuildContext context, int index) {
              return GestureDetector(
                  onTap: () {
                    Navigator.push(
                        context,
                        MaterialPageRoute(
                            builder: (context) => const Orderdetail()));
                  },
                  child: Container(
                      width: double.infinity,
                      height: 250,
                      padding: const EdgeInsets.all(10),
                      color: const Color.fromARGB(255, 240, 242, 243),
                      child: Column(
                        children: [
                          // 1.2.1 第一层
                          Row(
                            children: [
                              Text(orderInfo['createTime']),
                              const Spacer(),
                              Text(orderInfo['orderState'] == 2 ? '待收货' : '待付款',
                                  style: TextStyle(
                                      color: orderInfo['orderState'] == 2
                                          ? Colors.red
                                          : Colors.blue)),
                            ],
                          ),
                          // 1.2.2 第二层
                          Padding(
                              padding: const EdgeInsets.only(top: 10),
                              child: Row(
                                  // 侧轴方向起始位置对齐
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  children: [
                                    // 左侧
                                    const Image(
                                        width: 100,
                                        height: 100,
                                        image: NetworkImage(
                                            'https://yanxuan-item.nosdn.127.net/a09de222ed32efa8ffe359b1d5780574.jpg')),
                                    // 右侧
                                    Expanded(
                                        child: Padding(
                                            padding:
                                                const EdgeInsets.only(left: 10),
                                            child: Column(
                                                crossAxisAlignment:
                                                    CrossAxisAlignment.start,
                                                children: [
                                                  // 商品名称 + 数量
                                                  Row(
                                                    children: [
                                                      Expanded(
                                                          child: Text(orderInfo[
                                                              'name'])),
                                                      const Text('x2'),
                                                    ],
                                                  ),
                                                  // 规格
                                                  Padding(
                                                    padding:
                                                        const EdgeInsets.only(
                                                            top: 5),
                                                    child: Container(
                                                      padding:
                                                          const EdgeInsets.all(
                                                              5),
                                                      decoration: BoxDecoration(
                                                          color: const Color
                                                              .fromARGB(255,
                                                              241, 202, 202),
                                                          borderRadius:
                                                              BorderRadius
                                                                  .circular(5)),
                                                      child: Text(
                                                        orderInfo['attrsText'],
                                                        maxLines: 1,
                                                        style: const TextStyle(
                                                            color: Colors.red),
                                                      ),
                                                    ),
                                                  ),
                                                  // 价格
                                                  Padding(
                                                    padding:
                                                        const EdgeInsets.only(
                                                            top: 5),
                                                    child: Text(
                                                        '¥${orderInfo['curPrice']}'),
                                                  )
                                                ])))
                                  ])),
                          // 1.2.3 第三层
                          // 合计, 右对齐
                          Padding(
                            padding: const EdgeInsets.only(top: 10),
                            child: Row(
                              children: [
                                const Spacer(),
                                const Text('合计:'),
                                Text('¥${orderInfo['totalMoney']}'),
                              ],
                            ),
                          ),
                          // 1.2.4 第四层
                          //两个按钮 确认收货, 取消订单
                          Padding(
                              padding: const EdgeInsets.only(top: 10),
                              child: Row(children: [
                                const Spacer(),
                                ElevatedButton(
                                    onPressed: () {},
                                    style: ElevatedButton.styleFrom(
                                        backgroundColor: Colors.red),
                                    child: const Text(
                                      '确认收货',
                                      style: TextStyle(color: Colors.white),
                                    )),
                                const SizedBox(width: 10),
                                ElevatedButton(
                                    onPressed: () {},
                                    style: ElevatedButton.styleFrom(
                                        backgroundColor: const Color.fromARGB(
                                            255, 56, 8, 226)),
                                    child: const Text('取消订单',
                                        style: TextStyle(color: Colors.white))),
                              ]))
                        ],
                      )));
            },
            separatorBuilder: (BuildContext context, int index) {
              return Container(
                // margin: const EdgeInsets.only(left: 10, right: 10),
                width: double.infinity,
                height: 10,
                color: const Color.fromARGB(255, 236, 231, 231),
              );
            },
            itemCount: 20));
  }
}
